<style lang="less" scoped>
@import "../assets/css/config.less";
*{
  margin: 0;
}
.flex-row{
  display: flex;
  justify-content: start;
}
.flex-space-between{
  display: flex;
  justify-content: space-between;
}
.flags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  input{
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    line-height: 28px;
    outline: none;
    padding: 0 10px;
    &:focus{
      border-color: @color2;
    }
  }
  .font {
    line-height: 28px;
    font-size: 13px;
    padding: 0 10px;
  }
  .radio{
    margin: 0 10px;
  }
}



.myPath {
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
}

.indexsty {
  overflow-x: hidden;
  overflow-y: hidden;
}
.card-center {
  display: flex;
  justify-content: center;
  align-items: center;
  .card {
    width: 800px;
    margin-top: 30px;
    background-color: #fff;
  }
}

.title {
  font-weight: 700;
  text-align: left;
  margin-bottom: 5px;
  color: #222;
  margin-bottom: 10px;
}

.point-title {
  font-weight: 550;
  color: #444;
}

.ques_content {
  text-align: left;
}

.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 5px 0;
}

.left {
  text-align: left;
  margin: 0 0 5px;
}

.column {
  display: flex;
  flex-direction: column;
}

.my_answer {
  font-weight: bold;
}

.answer {
  font-weight: bold;
}

.right_no {
  float: right;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 100;
}
.secondary-navigation{
  min-width: 1210px;
  top: 58px;
  left: 0;
  right: 0;
  background-color: #fff;
  position: fixed;
  z-index: 90;
  padding: 5px 15px ;
  margin: 0 0 30px;
  border-bottom: 1px solid #F2F2F2;
  .item{
    cursor: default;
    margin: 0;
    .text{
      position: relative;
      font-size: 15px;
      padding: 0 15px;
      margin: 10px 0;
      border-right: 2px solid #F2F2F2;
      .active{
        color: @color2;
        &::after{
          content:'';
          // position: absolute;
          float: left;
          bottom: 0;
          border-bottom: 5px solid @color2;
          width: 100%;
          transform: translateY(10px);
        }
      }
    }
    &:hover{
      color: @color2;
    }
  }
  transition: top 0.3s;
}
.loading{
  color: #9B9B9B;
}
.button{
  line-height: 32px;
  background-color: @color1;
  color: white;
  border-radius: 4px;
  font-size: 13px;
  width: 80px;
  outline: none;
  border: none;
  cursor: pointer;
}
.button:hover{
  background-color: @color2;
}
.button:active{
  background-color: @color3;
}
</style>
<style lang="less">
  @import "../assets/css/config.less";
  #path .ivu-layout{
    background-color: #fff!important;
  }
  #path .el-radio__input.is-checked .el-radio__inner{
    border-color: @color2!important;
    background-color: @color2!important;
  }
  #path .el-radio__inner:hover{
    border-color: @color2!important;
  }
  #path .el-radio__input.is-checked+.el-radio__label{
    color:  @color2!important;
  }
</style>
<template>
  <div id="path" class="indexsty">
    <div class="header">
      <myheader></myheader>
    </div>
    <div style="margin-top: 60px" id="content" class="myPath">
      <Layout :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}">
        <div class="flex-space-between secondary-navigation" :style="showNavigation ? 'top:58px' : 'top:-5px'">
          <div class="flex-row">
            <div 
              class="item"
              @click="choosePage('learn')"
              >
              <div class="text">
                <p :class="activeName==='learn'?'active':''">学习路径</p>
              </div>
            </div>
            <div 
              class="item"
              @click="choosePage('task')"
              >
              <div class="text">
                <p :class="activeName==='task'?'active':''">做题路径</p>
              </div>
            </div>
          </div>

          <div
            class="flags"
            v-if="myGroup === '3'||myGroup === '1'||myGroup === '2'"
            >
            <p class="font">输入要查询的学号：</p>
            <input style="height:28px;width:140px" v-model="stuNum" placeholder="请输入查询的学号..." />
            <span class="font">学校：</span>
            <div style="width:140px;height:30px">
              <my-dropdown :list="schoolList" :initData="querySchool" @onClick="handleSelect1"/>
            </div>
            <span class="font">查询范围：</span>
            <div style="width:120px;height:30px">
              <my-dropdown :list="periods" @onClick="handleSelect"/>
            </div>
            <div class="radio">
              <el-radio-group v-model="reverse">
                <el-radio :label="true" style="margin: 0 10px">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
              </el-radio-group>
            </div>
            <button
              @click="query"
              style="margin: 0 15px 0 20px;"
              class="button"
              type="primary"
            >点击查询</button>
          </div>
        </div>
        <div style="margin-top: 60px">
          <div style="padding: 5px 6px 15px">
            <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
          </div>
          <div v-if="activeName === 'learn'">
            <Layout
              class="card-center"
            >
              <div class="card">
                
                <el-timeline>
                  <div v-for="(rec,index) in learnRecord" :key="index">
                    <el-timeline-item :timestamp="rec.time" placement="top">
                      <el-card>
                        <h4>{{rec.lesName}}</h4>
                        <p>{{rec.charName}} {{rec.charSubName}}</p>
                        <p v-if="rec.view==='point'">{{rec.pointName}}</p>
                        <p style="color: #aaa" v-if="rec.view==='word'">文档视图无具体知识点</p>
                      </el-card>
                    </el-timeline-item>
                  </div>
                  <div class="loading" v-if="loading">
                    加载中
                    <i class="el-icon-loading"></i>
                  </div>
                  <div class="no-more-path" v-if="nomoreLearnPath && learnRecord.length > 0">没有更多学习路径了哦~</div>
                  <div v-if="nomoreLearnPath && learnRecord.length === 0">暂无学习记录~</div>
                </el-timeline>
                
              </div>
            </Layout>
          </div>
          <div v-if="activeName=== 'task'">
            <Layout
              class="card-center"
            >
              <div class="card">
                <el-timeline>
                  <div v-for="(rec,index) in taskRecord" :key="index">
                    <el-timeline-item :timestamp="rec.time" placement="top">
                      <el-card>
                        <div class="title">
                          <span>{{rec.lesson}}</span>
                          <span>{{rec.char_name}} {{rec.section_name}}</span>
                          <span class="point-title">—— {{rec.point_title}}</span>
                        </div>
                        <div class="ques_content">
                          <div class="left" v-html="rec.question_content"></div>
                          <Divider />
                          <div v-if="rec.question_type === 'panduan'">
                            <div class="column" v-if="!rec.attachment">
                              <div class="my_answer">我的答案：</div>
                              <div>
                                <el-button
                                  type="success"
                                  icon="el-icon-check"
                                  circle
                                  size="mini"
                                  v-if="rec.result"
                                  class="right_no"
                                ></el-button>
                                <el-button
                                  type="danger"
                                  icon="el-icon-close"
                                  circle
                                  size="mini"
                                  v-if="!rec.result"
                                  class="right_no"
                                ></el-button>
                                <p v-if="rec.stu_answer[0] === 'yes'">正确</p>
                                <p v-if="rec.stu_answer[0] === 'no'">错误</p>
                              </div>
                              <div class="answer">正确答案：</div>
                              <p v-if="rec.question_answer[0] === 'yes'">正确</p>
                              <p v-if="rec.question_answer[0] === 'no'">错误</p>
                            </div>
                            <div class="column" v-if="rec.attachment">
                              <div class="my_answer">我的答案：</div>
                              <div>
                                <el-button
                                  type="success"
                                  icon="el-icon-check"
                                  circle
                                  size="mini"
                                  v-if="rec.result"
                                  class="right_no"
                                ></el-button>
                                <el-button
                                  type="danger"
                                  icon="el-icon-close"
                                  circle
                                  size="mini"
                                  v-if="!rec.result"
                                  class="right_no"
                                ></el-button>
                                <p v-if="rec.stu_answer[0] === 'yes'">正确</p>
                                <p v-if="rec.stu_answer[0] === 'no'">错误</p>
                              </div>
                              <div class="answer">正确答案：</div>
                              <p v-if="rec.question_answer === 'yes'">正确</p>
                              <p v-if="rec.question_answer === 'no'">错误</p>
                            </div>
                          </div>
                          <div class="xuanxiang" v-if="rec.question_type === 'xuanze'">
                            <div v-for="(item, index) in rec.question_item" :key="index">
                              <span style="margin-right:2px">{{"ABCDEFGHIJKLMNOPQRSTUVWXYZ"[index]}}</span>
                              <span>{{item}}</span>
                            </div>
                          </div>
                          <div v-if="rec.question_type === 'xuanze'">
                            <div class="column">
                              <div class="my_answer">我的答案：</div>
                              <div>
                                <el-button
                                  type="success"
                                  icon="el-icon-check"
                                  circle
                                  size="mini"
                                  v-if="rec.result"
                                  class="right_no"
                                ></el-button>
                                <el-button
                                  type="danger"
                                  icon="el-icon-close"
                                  circle
                                  size="mini"
                                  v-if="!rec.result"
                                  class="right_no"
                                ></el-button>
                                <div class="flex-row">
                                  <p v-for="ans in rec.stu_answer" :key="ans">
                                    <span style="margin-right:2px">{{"ABCDEFGHIJKLMNOPQRSTUVWXYZ"[ans-1]}}</span>
                                  </p>
                                </div>
                              </div>
                              <div class="answer">正确答案：</div>
                              <div class="flex-row">
                                <p v-for="ans in rec.question_answer" :key="ans">
                                  <span style="margin-right:2px">{{"ABCDEFGHIJKLMNOPQRSTUVWXYZ"[ans-1]}}</span>
                                </p>
                              </div>
                            </div>
                          </div>
                          <div v-if="rec.question_type === 'jianda'">
                            <div class="my_answer">我的答案：</div>
                            <div class="left" v-html="rec.stu_answer[0]"></div>
                            <div class="answer">正确答案：</div>
                            <div>言之有理即可</div>
                          </div>
                          <Divider v-if="rec.question_illustration !== ''"/>
                          <div class="left" v-if="rec.question_illustration !== ''">
                            <div class="my_answer">答案解析：</div>
                            <div class="left" v-html="rec.question_illustration"></div>
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </div>
                  <div class="loading" v-if="loadingTask">
                    加载中
                    <i class="el-icon-loading"></i>
                  </div>
                  <div class="no-more-path" v-if="nomoreTaskPath && taskRecord.length > 0">没有更多做题路径了哦~</div>
                  <div class="no-more-path" v-if="nomoreTaskPath && taskRecord.length === 0">还没有做题路径哦~</div>
                </el-timeline>
                
              </div>
            </Layout>
          </div>
        </div>
      </Layout>
    </div>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import myDropDown from "../components/myDropDown.vue";
import { get_process, getQuesPath } from "../api/api";
import { debounce } from "../utils/debounce"
export default {
  name: "myPath",
  data: function() {
    return {
      reverse: true, // radio 按钮选择的，并不一定生效
      queryReverse: -1, //点击查询按钮后生效的, -1 倒序
      myGroup: "",
      qureyNum: "",       // 当前正在查询的学号
      stuNum: '',         // 输入的学号，点击查询按钮后生效
      school: '',
      querySchool: '',
      homePeriod: "2",
      period: "2",
      queryPeriod: '2',
      learnRecord: [],
      taskRecord: [],
      activeName: "learn",
      periods: [
        {
          value: "2",
          label: "全部"
        },
        {
          value: "1",
          label: "近三月"
        },
        {
          value: "0",
          label: "近一周"
        }
      ],
      schoolList: [{
        value: '北京邮电大学',
        label: '北京邮电大学'
      }],
      currentLearnPage: 1,
      currentTaskPage: 1,
      showNavigation: true,
      lastScrollTop: 0,
      loading: false,
      loadingTask: false,
      nomoreLearnPath: false,
      nomoreTaskPath: false,
      breadcrumbList: [
        {
          name: "首页",
          blod: true,
          to: "index",
        }, {
          name: "路径查询",
        }
      ],
    };
  },
  created(){
    const user = JSON.parse(this.$store.state.user);
    this.myGroup = user.userGroup;
    this.stuNum = this.qureyNum = user.stuNo;
    this.school = this.querySchool = user.school;
    this.choosePage('learn')
  },
  mounted() {
    const that = this
    window.addEventListener('scroll', debounce(function(e){
      //文档内容实际高度（包括超出视窗的溢出部分）
      var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
      //滚动条滚动距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
      //窗口可视范围高度
      var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);

      if(clientHeight + scrollTop +1>= scrollHeight){
          
        if(that.activeName === 'learn'){
          that.loadMoreLearnPath()
        } else {
          that.getMoreTaskPath()
        }
          
      }
      
      if(scrollTop>that.lastScrollTop){
        that.showNavigation = false
      } else {
        that.showNavigation = true
      }
      that.lastScrollTop = scrollTop
    }, 50, false))
    
  },
  components: {
    myheader: header,
    'my-dropdown': myDropDown,
    'my-breadcrumb': myBreadcrumb
  },
  methods: {
    choosePage(page){
      this.activeName = page
      this.breadcrumbList = [...this.breadcrumbList.slice(0, 2), {name: page==='learn'?'学习路径':'做题路径'}]
      this.query()
    },
    handleSelect(data){
      this.period = data.value;
    },
    handleSelect1(data){
      this.school = data.value;
    },
    loadMoreLearnPath(){
      if(this.loading || this.nomoreLearnPath){
        return
      }
      this.loading = true
      get_process({
        school: this.querySchool,
        stuNo: this.qureyNum,
        time: this.queryPeriod,
        page: this.currentLearnPage,
        count: 20,
        reverse: this.queryReverse
      })
      .then(response => {
        if (response.state === true) {
          this.loading = false;
          if(response.msg.length===0){
            this.nomoreLearnPath = true
            return
          }
          this.learnRecord = [...this.learnRecord, ...response.msg];
          this.currentLearnPage += 1
        } else {
          this.loading = false;
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.loading = false;
        this.$Message.error(error.status);
      });
    },
    getMoreTaskPath(){
      if(this.loadingTask || this.nomoreTaskPath){
        return
      }
      this.loadingTask = true
      getQuesPath({
        stuNo: this.qureyNum,
        school: this.querySchool,
        time: this.queryPeriod,
        page: this.currentTaskPage,
        count: 20,
        reverse: this.queryReverse
      })
      .then(response => {
        if (response.state === true) {
          this.loadingTask = false;
          if(response.QuesPath.length===0){
            this.nomoreTaskPath = true
            return
          }
          this.taskRecord = [...this.taskRecord, ...response.QuesPath];
          this.currentTaskPage += 1
        } else {
          this.loadingTask = false;
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.loadingTask = false;
        this.$Message.error(error.status);
      });
    },
    query(){
      this.queryReverse = this.reverse ? -1 : 1
      this.qureyNum = this.stuNum
      this.querySchool = this.school
      this.queryPeriod = this.period
      if(this.activeName === 'learn'){
        this.learnRecord = []
        this.nomoreLearnPath = false
        this.currentLearnPage = 1
        this.loadMoreLearnPath()
      } else {
        this.taskRecord = []
        this.nomoreTaskPath = false
        this.currentTaskPage = 1
        this.getMoreTaskPath()
      }
    }
  }
};
</script>